<template>
    <div class="paper">
        <div style="display: flex;align-items: center; flex-wrap: wrap;">
            <h5>题目Id：</h5>
            <el-input v-model="data.id" style="width: 240px;margin:0 10px;" placeholder="题目Id" clearable size="large" />
            <h5>题目内容：</h5>
            <el-input v-model="data.content" style="width: 240px;margin:0 10px;" placeholder="题目内容" clearable
                size="large" />
            <h5>年级：</h5>
            <el-select v-model="data.level" placeholder="年级" size="large" style="width: 240px;margin:0 10px;" filterable
                clearable>
                <el-option label="请选择" value="" />
                <el-option v-for="item in slevel" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <h5>学科：</h5>
            <el-select v-model="data.subjectId" placeholder="请选择" size="large" style="width: 240px;margin:0 10px;"
                filterable clearable>
                <el-option label="请选择" value="" />
                <el-option v-for="item in subjectName" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
            <h5>题型:</h5>
            <el-select v-model="data.questionType" placeholder="请选择" size="large" style="width: 240px;margin:0 10px;"
                filterable clearable>
                <el-option label="请选择" value="" />
                <el-option v-for="item in questType" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
            <el-button type="primary" size="large" @click="getList">查询</el-button>
            <el-popover placement="bottom" width="28%" trigger="click">
                <template #reference>
                    <el-button type="primary" size="large">添加</el-button>
                </template>
                <div style="width: 100%;text-align: center;">
                    <el-button type="warning" size="small" plain
                        @click="router.push('singlechoice')">单选题</el-button>
                    <el-button type="warning" size="small" plain
                        @click="router.push('multiplechoice')">多选题</el-button>
                    <el-button type="warning" size="small" plain
                        @click="router.push('truefalse')">判断题</el-button>
                    <el-button type="warning" size="small" plain
                        @click="router.push('gapfilling')">填空题</el-button>
                    <el-button type="warning" size="small" plain
                        @click="router.push('shortanswer')">简答题</el-button>
                </div>
            </el-popover>
        </div>

        <el-table :data="tableDataWithSubject" border style="width: 100%">
            <el-table-column prop="id" label="Id" width="50" />
            <el-table-column prop="subjectName" label="学科" width="120" />
            <el-table-column prop="questionLabel" label="题型" width="80" />
            <el-table-column prop="shortTitle" label="题干" />
            <el-table-column prop="score" label="分数" width="50" />
            <el-table-column prop="difficult" label="难度" width="50" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="look(scope.row.id)">预览</el-button>
                    <el-button @click="change(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="dele(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div style="display: flex; align-items: center;height: 60px;">
        <span>共{{ total }}条</span>
        <div style="margin: 0 20px;">
            <el-select v-model="data.pageSize" placeholder="Select" size="small" style="width: 100px"
                @change="handleSizeChange">
                <el-option v-for="item in psize" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
            :current-page="data.pageIndex" :page-sizes="[5, 10, 20, 30, 50]" :page-size="data.pageSize" />
        <div style="display: flex;width: 150px;justify-content: center;align-items: center;">
            <span style="display: flex;width: 60px;justify-content: center;align-items: center;">前往</span><el-input
                v-model.lazy="data.pageIndex" class="center-input" style="width: 50px;" /><span
                style="margin-left: 15px;">页</span>
        </div>
    </div>

    <el-dialog v-model="dialogVisible" title="题目预览" width="500">
        <el-form :model="lookquest">
            <el-form-item v-html="lookquest.title"></el-form-item>
            <el-form-item>
                <span v-for="(item, index) in lookquest.items" :key="index" v-html="`${item.prefix}、${item.content}`"
                    style="margin-right: 15px;"></span>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { subject, delquest, quest, search } from "@/api/paper"
import type { AxiosResponse } from 'axios';
import { ElMessage, rowContextKey } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter();
const dialogVisible = ref(false)
type listType = {
    analyzeTextContentId: number
    correct: string
    createTime: string
    createUser: number
    difficult: number
    id: number
    questionType: number
    score: string
    shortTitle: string
    status: number
    subjectId: number
    textContentId: number
}[]

interface ApiResponse<T> {
    code: number;
    message: string;
    response: {
        total: number;
        list: T
    };
}
const sub = ref<{ id: number, label: string, level: number }[]>([])
subject().then(res => {
    const subject = res.data.response.map((subject: any) => {
        const subjectName = subject ? `${subject.name}(${subject.levelName})` : '未知学科'
        return { id: subject.id, label: subjectName, level: subject.level }
    })
    sub.value = subject
})
let subjectName = computed<{ id: number; label: string; level: number; }[]>(() => {
    if (!data.value.level) return []
    const selectedLevel = data.value.level
    return sub.value.filter(subject => subject.level === selectedLevel)
})
let tableData = ref<listType>([]);
let total = ref(0)
const questType = [
    { id: 1, label: '单选题' },
    { id: 2, label: '多选题' },
    { id: 3, label: '判断题' },
    { id: 4, label: '填空题' },
    { id: 5, label: '简答题' },
]
const psize = ref([
    { label: '共5条', value: 5 },
    { label: '共10条', value: 10 },
    { label: '共20条', value: 20 },
    { label: '共30条', value: 30 },
    { label: '共40条', value: 40 },
    { label: '共50条', value: 50 }
]);
const slevel = ref([
    { label: '一年级', value: 1 },
    { label: '二年级', value: 2 },
    { label: '三年级', value: 3 },
    { label: '四年级', value: 4 },
    { label: '五年级', value: 5 },
    { label: '六年级', value: 6 },
    { label: '初一', value: 7 },
    { label: '初二', value: 8 },
    { label: '初三', value: 9 },
    { label: '高一', value: 10 },
    { label: '高二', value: 11 },
    { label: '高三', value: 12 },
])
const handleCurrentChange = (page: number) => {
    data.value.pageIndex = page
    getList()
}
// 每页条数变化时触发
const handleSizeChange = (size: number) => {
    data.value.pageSize = size
    data.value.pageIndex = 1 // 重置为第一页
    getList()
}
function removeHtmlTags(html: string): string {
    if (!html) return '';
    // 匹配所有HTML标签的正则表达式
    return html.replace(/<[^>]+>/g, '');
}
let lookquest = ref<any>({})
function look(id: any) {
    dialogVisible.value = true
    search(id).then(res => {
        console.log(res);
        if (res.status === 200) {
            res.data.response.items.map((item: any) => {
                item.content = removeHtmlTags(item.content)
            })
            lookquest.value = res.data.response
        }
    })
}
function dele(id: number) {
    delquest(id).then(res => {
        if (res.status === 200) {
            ElMessage.success('删除成功')
            getList()
        }
    })
}
function change(row: any) {
    if (row.questionType == 1) {
        router.push({
            path: 'singlechoice',
            query: { id: row.id }
        })
    } else if (row.questionType == 2) {
        router.push({
            path: 'multiplechoice',
            query: { id: row.id }
        })
    } else if (row.questionType == 3) {
        router.push({
            path: 'truefalse',
            query: { id: row.id }
        })
    } else if (row.questionType == 4) {
        router.push({
            path: 'gapfilling',
            query: { id: row.id }
        })
    } else {
        router.push({
            path: 'shortanswer',
            query: { id: row.id }
        })
    }
}

type dataType = {
    id: number | ""
    level: number | ""
    pageIndex: number
    pageSize: number
    questionType: number | ""
    subjectId: number | ""
    content: string
}
let data = ref<dataType>({
    id: "",
    level: "",
    pageIndex: 1,
    pageSize: 10,
    questionType: "",
    subjectId: "",
    content: ""
})
function getList() {
    quest(data.value).then((res: AxiosResponse<ApiResponse<listType>>) => {
        if (res.data.code === 1) {
            tableData.value = res.data.response.list
            total.value = res.data.response.total
        }
    })

}
const tableDataWithSubject = computed(() => {
    return tableData.value.map(paper => {
        const subName = sub.value.find(i => i.id === paper.subjectId)
        const subjectName = subName?.label
        const question = questType.find(s => s.id === paper.questionType)
        const questionLabel = question?.label
        return { ...paper, questionLabel, subjectName }
    })
})
watch(() => data.value.level, () => {
    data.value.subjectId = ''
})
watch(() => data.value.pageIndex, (newValue, oldValue) => {
    if (!newValue) {
        data.value.pageIndex = oldValue
    } else {
        data.value.pageIndex = newValue;
        getList()
    }
});
getList()
onMounted(() => {

})

</script>

<style scoped>
::v-deep .center-input .el-input__inner {
    text-align: center;
}
</style>